<template>
  <div>
    <el-table :data="metaData" style="width: 100%">
      <el-table-column label="计划单编号" prop="productionId"></el-table-column>
      <el-table-column label="产品编号" prop="productId"></el-table-column>
      <el-table-column label="产品名称" prop="productFile.productName"></el-table-column>
      <el-table-column label="描述" prop="productFile.productName"></el-table-column>
      <el-table-column label="数量" prop="productNumber"></el-table-column>
      <el-table-column label="物料成本" prop="sumPrice"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="maketDispatchRegister(scope.row)" type="text" size="small">审核</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="派工审核" :visible.sync="dialogVisible" width="70%">
      <baseTable :tableHeader="processHeader" :tableData="processData" @queryPart="findProcessParts"></baseTable>
      <el-dialog title="工序物料" :visible.sync="dialogVisible2" width="70%" append-to-body>
        <!-- <baseTable :tableHeader="processPartHeader" :tableData="processPartData" @queryPart="findProcessParts"></baseTable> -->
        <el-table :data="processPartData" style="width: 100%">
          <el-table-column label="物料编号" property="productFile.productId"></el-table-column>
          <el-table-column label="物料名称" property="productFile.productName"></el-table-column>
          <el-table-column label="描述" property="productFile.protDescribe"></el-table-column>
          <el-table-column label="本工序使用数量" property="partNumber"></el-table-column>
          <el-table-column label="单价" property="productFile.costPrice"></el-table-column>
          <el-table-column label="小计" property="partPrice"></el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible2 = false">关 闭</el-button>
        </span>
      </el-dialog>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="makeDispatch">通过审核</el-button>
        <el-button @click="dialogVisible = false">不通过</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import productionPlan from '@/api/apis/productionPlan'
  import process from '@/api/apis/process'
  import baseTable from '@/components/table/baseTable'

  export default {
    components: {
      baseTable
    },
    data() {
      return {
        metaData: [],
        maketData: {},
        processData: [],
        processHeader: [{
            prop: 'processId',
            label: '工序编号',
            minWidth: '100px',
            sortable: 'true'
          },
          {
            prop: 'processName',
            label: '工序名称',
            minWidth: '100px',
          },
          {
            prop: 'manHour',
            label: '工时数',
            minWidth: '100px',
          },
          {
            prop: 'unitPrice',
            label: '工时单价',
            minWidth: '100px',
          },
          {
            prop: 'sumPrice',
            label: '小计',
            minWidth: '100px',
          },
          {
            prop: 'oper',
            label: '操作',
            fixed: 'right',
            minWidth: '140px',
            oper: [{
              name: '查看物料',
              clickFun: 'queryPart'
            }]
          }
        ],
        processPartData: [],
        dialogVisible: false,
        dialogVisible2: false
      }
    },
    methods: {
      makeDispatch() {
        productionPlan.updateDispatch(this.maketData.productionId,this.maketData.productId,3)
        .then(resp => {
          if(resp.code === 200) {
            this.$message.success(resp.msg)
            this.findInit()
            this.dialogVisible = false
          }else{
            this.$message.error(resp.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
      },
      findInit() {
        productionPlan.findAwaitDispatch(2,2)
          .then(resp => {
            this.metaData = resp.data
          })
          .catch(err => {
            console.log(err)
          })
      },
      maketDispatchRegister(row) {
        this.maketData = row
        process.findProductProcess(row.productId)
          .then(resp => {
            if (resp.code === 200) {
              this.processData = resp.data
              this.dialogVisible = true
            } else {
              this.$message.error(resp.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })

      },
      findProcessParts(row) {
        process.findPartByProcessId(row.processId)
          .then(resp => {
            this.processPartData = resp.data
            this.dialogVisible2 = true
          })
          .catch(err => {
            console.log(err)
          })
      }
    },
    mounted() {
      this.findInit()
    }
  }
</script>

<style scoped>
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

  .disBtn {
    margin-bottom: 5px;
  }
</style>
